<template>
  <view class="activity-detail-page">
    <view class="page-banner">
      <image class="img" src="https://cdc-file.risechina.com/img/2021/11/1635839717046.png" mode="widthFix"></image>
    </view>
    <view class="page-title">
      <view class="page-title-content">
        <view class="title">TASAKI Comet Pearly Planet</view>
        <button class="btn-share" open-type="share">
          <image src="/static/common/image/btn_share.png"></image>
        </button>
        <view class="msg">彗星云图</view>
        <view class="msg" style="margin-top:5rpx">塔思琦彗星珠宝系列互动活动公众开放日预约</view>
      </view>
    </view>
    <view class="page-detail">
      <view class="page-detail-content">
        <view class="title">活动详情</view>
        <view class="msg CN_24">
          塔思琦携全新coment plus系列，于武康路的静谧之所，呈现彗星浪漫而唯美的独特氛围。在深秋的庭院之中，层林尽染好似深邃星河，在钻石和珍珠的光芒映射之下，一张神秘的彗星云图徐徐展开，塔思琦邀请你来此一同狩猎彗星，捕获星光。
        </view>
      </view>
    </view>
    <view class="btns-fix-bottom">
      <view class="btns-fix-bottom-content">
        <button class="btn-kefu" open-type="contact">
          <image src="/static/common/image/btn_kefu.png"></image>
        </button>  
        <view :class="{ 'btn__disabled': !canBookVis, 'btn-sign-up':true }" @click="goNextPage">
          {{ canBookVis ? vuex_userInfo.session_id ? '查看已预约信息' : '立即预约' : '已过预约日期' }}
        </view>  
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      canBookVis: new Date('2021/11/14 23:59:59').getTime() > Date.now()
    };
  },
  onLoad() {
    this.init();
  },
  onShow() {
  },
  methods: {
    async init() {
      // this.get();
    },
    goNextPage() {
      if (this.canBookVis) {
        uni.navigateTo({ url: '/pages/signUp/index?' });
      }
    }
  },
  onShareAppMessage() {
    return {
      title: "即刻预约TASAKI彗星珠宝系列互动活动",
      imageUrl: "https://cdc-file.risechina.com/img/2021/11/1636000449401.png",
      path: `/pages/activityDetail/index`
    };
  }
};
</script>

<style lang="scss" scoped>
.page-banner {
  width: 100%;
  margin: 0;
  padding: 0;
  .img {
    width: 100%;
    height: auto;
  }
}
.page-title {
  padding: 0 55rpx;
  &-content {
    padding: 68rpx 0;
    border-bottom: 1rpx solid #adadae;
    .title {
      font-family: GillSans;
      font-weight: 600;
      font-size: 33rpx;
    }
    .btn-share {
      padding: 30rpx 0;
      background-color: transparent;
      display: flex;
      &::after {
        border: none;
      }
      image {
        width: 99rpx;
        height: 32rpx;
      }
    }
    .msg {
      font-family: HiraginoSansGB-W3;
      font-size: 27rpx;
      color: #818181;
    }
  } 
}
.page-detail {
  padding: 0 55rpx 200rpx 55rpx;
  &-content {
    padding: 68rpx 0;
    .title {
      font-family: GillSans;
      font-weight: 600;
      font-size: 33rpx;
    }
    .msg {
      margin-top: 18rpx;
    }
  } 
}
.btns-fix-bottom {
  width: 100%;
  padding: 60rpx 55rpx 0 55rpx;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  &-content {
    padding: 27rpx 0 90rpx 0;
    border-top: 1px solid #adadae;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .btn-kefu {
      background-color: transparent;
      display: flex;
      justify-content: center;
      align-items: center;
      &::after {
        border: none;
      }
      image {
        width: 96rpx;
        height: 70rpx;
      }
    }
    .btn-sign-up {
      width: 460rpx;
      height: 90rpx;
      background-color: #3e3a39;
      text-align: center;
      line-height: 94rpx;
      color: #fff;
      font-size: 28rpx;
      font-family: HiraginoSansGB-W3;
    }
    .btn__disabled {
      background-color: #999;
    }
  }
}
</style>
